<template>
  <div class="container">
    <el-button type="primary" @click="exportPDF" class="report">报表下载</el-button>
    <el-card ref="content" id="content">
      <h1 class="company">{{ detaile.company || '某公司' }}</h1>
      <p class="type">加工订单</p>
      <p class="unit">单位：MM、KG</p>
      
      <div class="info">
        <el-row>
          <el-col :span="6"><span>订单重：{{ detaile.weightCount || '--' }}</span></el-col>
          <el-col :span="6"><span>密度：{{ detaile.steelType || '--' }}</span></el-col>
          <el-col :span="6"><span>成材率：{{ detaile.weightRate + '%' || '--' }}</span></el-col>
          <el-col :span="6"><span>时间：{{ timestampToDateBasic(detaile.cTime) }}</span></el-col>
        </el-row>
        {{ detaile.proc_info }}
      </div>
      <div class="message" v-if="tableList.length > 0">
        <div class="list" v-for="item in tableList">
          <div class="info_list">
            <el-row>
              <el-col :span="6"><span>原卷：{{ item.material_size }}</span></el-col>
              <el-col :span="6"><span>加工：{{ item.material_weight }}</span></el-col>
              <el-col :span="12"><span>刀组：{{ item.siseMeetting }}</span></el-col>
            </el-row>
          </div>
          <el-table :data="item.produceList" style="width: 100%" border>
            <el-table-column prop="width" label="宽度">
            </el-table-column>
            <el-table-column prop="length" label="长度">
              <template slot-scope="scope">
                    {{ scope.row.length != 0?scope.row.length:'C' }}
                  </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量">
            </el-table-column>
            <el-table-column prop="piece" label="片数">
              <template slot-scope="scope">
                    {{ scope.row.piece?scope.row.piece:'-' }}
                  </template>
            </el-table-column>
            <el-table-column prop="tolerance" label="公差">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { statementApi } from '@/api/index.js'
import { Message } from 'element-ui'
// import htmlDocx from 'html-docx-js/dist/html-docx';
// import FileSaver from "file-saver"; 
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
var moment = require('moment')
export default {
  data () {
    return {
      detaile: {},
      tableList: []
    }
  },
  created () {
    if( this.$store.state.orderInfo.company_id && this.$store.state.orderWeight && this.$store.state.yield &&this.$store.state.orderInfo.no){
     this.getStatement()
    }else{
      this.$router.push('/toolHandler')
      Message.warning('请先进行组刀操作')
    }
    
  },
  methods: {
    async getStatement () {
      let params = {
        company_id: this.$store.state.orderInfo.company_id,
        no: this.$store.state.orderInfo.no,
        weightCount: this.$store.state.orderWeight,
        weightRate: this.$store.state.yield
      }
      let res = await statementApi(params)
      if (res.code == 200) {
        if (res.data.baseInfo && Object.keys(res.data.baseInfo).length > 0) {
          this.detaile = res.data.baseInfo
        }
        if (res.data.proc_info && Object.keys(res.data.proc_info).length > 0) {
          for (const key in res.data.proc_info) {
            this.tableList.push(res.data.proc_info[key])
          }
        }
        // detaile.proc_info
      }
    },
    timestampToDateBasic (timestamp) {
      const datetime = moment(timestamp*1000).format('YYYY-MM-DD HH:mm:ss');
      return datetime;
    },
    //报表下载
    // reportDoenload(){
    //   const content = document.getElementById('content-to-export').innerHTML;
    //   const converted = htmlDocx.asBlob(content);
 
    //   FileSaver.saveAs(converted, this.detaile.company?this.detaile.company+'组刀报表':'某公司组刀报表');
    // },
    //到处pdf
    exportPDF() {
      const element = document.getElementById('content');
html2canvas(element).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4'); // 设置PDF的方向、单位和尺寸
  const imgWidth = pdf.internal.pageSize.getWidth();
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  
  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); // 添加图片到PDF
  pdf.save(this.detaile.company?this.detaile.company+'组刀报表':'某公司组刀报表'); // 保存PDF文件
});
    },
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: relative;
}
h1.company {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

p.type {
  text-align: center;
  margin-bottom: 10px;
}

p.unit {}

div.info {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

div.message {
  div.list {
    margin-bottom: 20px;

    .info_list {
      margin: 20px 0 10px;
    }
  }
}
.report{
  position: absolute;
  top:20px;
  right:20px;
}
</style>
